<template>
	<!-- 近期上新 -->
	<list-box :name="name"  :word="word"  :params="params">
		<!-- scroll-view scroll-x="true"  横向滚动 -->
		<!-- noScorll 全局隐藏条 -->
		<scroll-view    class="list-scroll noScorll  " scroll-x="true" >
			<view class="list-scroll-view" v-for="(item ,index ) in courseData " :key="index">
				<course-item :isColumn="true" :item="item"></course-item>
			</view>
		</scroll-view>
	</list-box>	
</template>

<script>
	//小头部组件
	import listBox from './list-box.vue'
	//小模块组件
	import courseItem from '@/components/common/course-item.vue'  
	import courseData from '@/mock/courseData.js'
	export default{
		components:{listBox,courseItem},
		props:{
			name:{	//标题
				type:String,
				default:'近期上新'
			},
			word:{		//字符串HOT
				type:String,
				default:null
			},
			courseData:{
				type:Array,
				default:()=> courseData
			},
			params:Object  //父组件传递过来的数据
		}
	}
</script>

<style lang="scss">
		.list-scroll{
			//不换行 ,一行显示
			white-space: nowrap;
			height: 380rpx;
			.list-scroll-view{
				display:inline-block; //他是行块
				width: 300rpx;
				padding: 0 0rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				box-shadow: 1px 1px 3px rgba(0,0,0,0.1);  //背景阴影
				background-color: #FFFFFF;
			}
		}
</style>
